<template>
  <div class="about">
    <!-- 头部 -->
    <div id="header">
      <a href="javascript:history.go(-1)">
        <span class="span2"></span>
      </a>
      <span class="span1">精选</span>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <!-- 搜索功能 -->
      <i class="iconfont icon-sousuo"></i>
      <input type="text" />
      <div>搜索</div>
    </div>

    <!-- 领劵 -->
    <div class="juan">
      <a href="">
        <img src="../../public/img/14.jpg" alt="" />
      </a>
      <a href="">
        <img src="../../public/img/15.jpg" alt="" />
      </a>
    </div>

    <!-- 四个物品 -->
    <div class="produce">
      <!-- 上 -->
      <div class="top">
        <!-- 左边 -->
        <div
          class="left"
          v-for="(val, key) in shop"
          :key="key"
          @click="sg(key)"
        >
          <router-link to="/xiang">
            <div>
              <img :src="val.shopSrc" alt="" />
            </div>
            <div>
              <p>{{ val.shopFont }}</p>
              <span class="jia">{{ val.shopMoney }}</span>
              <span class="iconfont icon-jiarugouwuche gouWu"></span>
            </div>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 简约展示 -->
    <div class="jianYue">
      <div class="jianYue_top">
        <img src="../../public/img/16.jpg" alt="" />
      </div>
      <div class="jianYue_bottom">
        <div class="jianYue_bottom_right">
          <p>简约</p>
          <span>SIMPLICIY</span>
        </div>
        <div class="jianYue_bottom_left">
          <span>色调是可以给人安全感和舒适感的自然色系是 我们一直所追求</span>
        </div>
      </div>
    </div>

    <!-- 热卖产品区 -->
    <div
      class="re"
      v-for="(val, key1) in hots"
      :key="key1"
      :class="`val ${key1 === kai ? 'zhan' : ''}`"
      @click="zk(key1, val.id)"
    >
      <!-- 标题 -->
      <header>
        <span>{{ val.title }}</span>
        <div></div>
      </header>
      <!-- 内容 -->
      <main
        v-for="(value, key2) in val.hot"
        :key="key2"
        @click="yemian(key1, key2)"
      >
        <router-link to="/xiang">
          <!-- 整体的内容  -->
          <div class="zheng">
            <!-- 左边的图片 -->
            <div class="main_left">
              <img :src="value.shopSrc" alt="" />
            </div>

            <!-- 右边的文字 -->
            <div class="main_right">
              <!-- 文字 -->
              <p>{{ value.shopFont }}</p>
              <!-- 钱 -->
              <span>{{ value.shopMoney }}</span>
              <!-- 购物车 -->
              <i class="iconfont icon-jiarugouwuche"></i>
            </div>
          </div>
        </router-link>
      </main>
    </div>

    <!-- 底部信息 -->
    <footer>
      <div>
        <span>店铺信息</span>
        <div class="xian"></div>
      </div>
    </footer>

    <!-- 两个图标 -->
    <div class="top_tu" v-show="top" @click="shang">
      <span></span>
    </div>
    <div class="ke">
      <router-link to="/">
        <span class="iconfont icon-shengdangouwuche"></span>
      </router-link>
    </div>
    <div class="gou">
      <router-link to="/">
        <span class="iconfont icon-kefu"></span>
      </router-link>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import bus from "@/bus.js";
// import "../assets/about.css";
export default {
  data() {
    return {
      shop: [],
      hots: [],
      // ss:'./img/6.jpg',
      /* shop: [
        {
          shopSrc: "./img/6.jpg",
          shopFont: "欧式水晶客厅吊灯客厅灯玉石卧室奢华大气餐厅灯具灯饰",
          shopMoney: "￥348-￥2000",
        },
        {
          shopSrc: "./img/6a.jpg",
          shopFont: "卧室风扇灯客厅吊扇灯 隐形餐厅吊灯欧式吊灯灯具套餐灯饰",
          shopMoney: "￥348-￥1088",
        },
        {
          shopSrc: "./img/6b.jpg",
          shopFont:
            "台灯卧室床头柜创意浪漫个性北欧书房宿舍书桌阅读学生装饰可旋转可爱网红台灯抖音小鹿",
          shopMoney: "￥560-￥860",
        },
        {
          shopSrc: "./img/6c.jpg",
          shopFont: "吊灯客厅灯欧式餐厅卧室吊灯美式乡村简欧田园简约现代灯饰",
          shopMoney: "￥348-￥2000",
        },
      ],
      // 热卖产品
      hots: [
        {
          id: 0,
          title: "热卖产品",
          hot: [
            {
              shopSrc: "./img/7a.jpg",
              shopFont:
                "吊灯客厅灯欧式餐厅卧室吊灯美式乡村简欧田园简约现代灯饰 ",
              shopMoney: "￥345-￥1000",
            },
            {
              shopSrc: "./img/7b.jpg",
              shopFont:
                "欧式水晶客厅吊灯客厅灯玉石卧室奢华大气餐厅灯具灯饰 隐形餐厅吊灯欧式吊灯灯具套餐灯饰",
              shopMoney: "￥348-1500",
            },
            {
              shopSrc: "./img/7c.jpg",
              shopFont:
                "艺品人生复古美式乡村客厅卧室吊灯蒂凡尼混搭花花鹦鹉彩色玻璃大吊灯",
              shopMoney: "￥348-￥2000",
            },
            {
              shopSrc: "./img/7d.jpg",
              shopFont:
                "台灯卧室床头柜创意浪漫个性北欧书房宿舍书桌阅读学生装饰可旋转可爱网红台灯抖音小鹿",
              shopMoney: "￥560-￥860",
            },
          ],
        },
        {
          id: 1,
          title: "精品出售",
          hot: [
            {
              shopSrc: "./img/7a.jpg",
              shopFont:
                "吊灯客厅灯欧式餐厅卧室吊灯美式乡村简欧田园简约现代灯饰 ",
              shopMoney: "￥345-￥1000",
            },
            {
              shopSrc: "./img/7b.jpg",
              shopFont:
                "欧式水晶客厅吊灯客厅灯玉石卧室奢华大气餐厅灯具灯饰 隐形餐厅吊灯欧式吊灯灯具套餐灯饰",
              shopMoney: "￥348-1500",
            },
            {
              shopSrc: "./img/7c.jpg",
              shopFont:
                "艺品人生复古美式乡村客厅卧室吊灯蒂凡尼混搭花花鹦鹉彩色玻璃大吊灯",
              shopMoney: "￥348-￥2000",
            },
            {
              shopSrc: "./img/7d.jpg",
              shopFont:
                "台灯卧室床头柜创意浪漫个性北欧书房宿舍书桌阅读学生装饰可旋转可爱网红台灯抖音小鹿",
              shopMoney: "￥560-￥860",
            },
          ],
        },
        {
          id: 2,
          title: "随心抢购",
          hot: [
            {
              shopSrc: "./img/7a.jpg",
              shopFont:
                "吊灯客厅灯欧式餐厅卧室吊灯美式乡村简欧田园简约现代灯饰 ",
              shopMoney: "￥345-￥1000",
            },
            {
              shopSrc: "./img/7b.jpg",
              shopFont:
                "欧式水晶客厅吊灯客厅灯玉石卧室奢华大气餐厅灯具灯饰 隐形餐厅吊灯欧式吊灯灯具套餐灯饰",
              shopMoney: "￥348-1500",
            },
            {
              shopSrc: "./img/7c.jpg",
              shopFont:
                "艺品人生复古美式乡村客厅卧室吊灯蒂凡尼混搭花花鹦鹉彩色玻璃大吊灯",
              shopMoney: "￥348-￥2000",
            },
            {
              shopSrc: "./img/7d.jpg",
              shopFont:
                "台灯卧室床头柜创意浪漫个性北欧书房宿舍书桌阅读学生装饰可旋转可爱网红台灯抖音小鹿",
              shopMoney: "￥560-￥860",
            },
          ],
        },
        {
          id: 3,
          title: "福利区",
          hot: [
            {
              shopSrc: "./img/7a.jpg",
              shopFont:
                "吊灯客厅灯欧式餐厅卧室吊灯美式乡村简欧田园简约现代灯饰 ",
              shopMoney: "特价：￥345-￥1000",
            },
            {
              shopSrc: "./img/7b.jpg",
              shopFont:
                "欧式水晶客厅吊灯客厅灯玉石卧室奢华大气餐厅灯具灯饰 隐形餐厅吊灯欧式吊灯灯具套餐灯饰",
              shopMoney: "特价：￥348-1500",
            },
            {
              shopSrc: "./img/7c.jpg",
              shopFont:
                "艺品人生复古美式乡村客厅卧室吊灯蒂凡尼混搭花花鹦鹉彩色玻璃大吊灯",
              shopMoney: "特价：￥348-￥2000",
            },
            {
              shopSrc: "./img/7d.jpg",
              shopFont:
                "台灯卧室床头柜创意浪漫个性北欧书房宿舍书桌阅读学生装饰可旋转可爱网红台灯抖音小鹿",
              shopMoney: "特价：￥560-￥860",
            },
          ],
        },
      ], */
      kai: "", //展开的开关
      count: true, //展开的次数
      arr: [],
      top: false,
    };
  },
  mounted() {
    if(localStorage.getItem('username')==null){
      this.$router.push({path:"/reg"});
    }
    window.addEventListener("scroll", this.handleScroll, true);
    window.scrollTo(0, 0);
    // 获取数据
    this.$axios
      .get("http://47.114.130.21:3002/about")
      .then((data) => {
        // console.log(data);
        if (data.status == 200) {
          this.shop = data.data.shop;
          this.hots = data.data.hots;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    zk(index, id) {
      //隔行打开
      this.arr.push(index);

      if (this.count) {
        this.kai = index;
        this.count = false;
      } else {
        this.kai = "";
        this.count = true;
        //隔行打开
        if (index != this.arr[this.arr.length - 2]) {
          this.kai = index;
          this.count = false;
        }
      }
    },
    sg(id) {
      // 第一种
      setTimeout(() => {
        bus.$emit("myHeader", {
          src: this.shop[id].shopSrc,
          title: this.shop[id].shopFont,
          money: this.shop[id].shopMoney,
        });
      }, 200);
    },
    yemian(id1, id2) {
      // 第一种
      setTimeout(() => {
        bus.$emit("myHeader", {
          src: this.hots[id1].hot[id2].shopSrc,
          title: this.hots[id1].hot[id2].shopFont,
          money: this.hots[id1].hot[id2].shopMoney,
        });
      }, 200);
    },
    shang() {
      // 置顶
      $("html").animate(
        {
          scrollTop: 0,
        },
        300,
        "linear"
      );
    },
    handleScroll() {
      var top = Math.floor(
        document.body.scrollTop ||
          document.documentElement.scrollTop ||
          window.pageYOffset
      );
      // 向上的图标显示
      if (top > 50) {
        this.top = true;
      } else {
        this.top = false;
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
* {
  padding: 0;
  margin: 0;
}
a {
  color: #444444 !important;
  text-decoration: none !important;
}
.about #header {
  width: 100%;
  height: 50px;
  text-align: center;
  background-color: #fff;
  // font-size: 16px;
  line-height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.about #header a img {
  width: 30px;
  height: 30px;
  margin: 0 0 10px 10px;
}
.about #header .span1 {
  margin: 0 145px;
}
.about #header .span2 {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  transform: rotate(-45deg);
}
.about {
  // 导航
  .nav {
    margin-top: 50px;
    width: 100%;
    height: 5.33049rem;
    background: url("../../public/img/13.jpg") 0 0 no-repeat;
    background-size: 100%;
    position: relative;
    i {
      position: absolute;
      left: 44px;
      top: 24px;
      font-size: 23px;
      color: #db8b19;
    }
    input {
      width: 80%;
      height: 40px;
      margin: 20px auto;
      border: 1px solid #e68904;
      border-radius: 20px;
      outline: none;
      padding: 0 20px;
      font-size: 14px;
      background-color: transparent;
      padding: 0 90px 0 35px;
    }
    // 搜索功能
    div {
      position: absolute;
      padding: 9px 30px;
      background: linear-gradient(to bottom, #f5c16a, #c4903b);
      border-radius: 20px;
      font-size: 15px;
      color: #fff;
      right: 36px;
      top: 20px;
    }
  }
  //领劵
  .juan {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 2.665245rem;
    background-color: #fff;
    margin: 15px 0;
    a {
      img {
        width: 160px;
        height: 85px;
      }
    }
  }

  // 两个物品
  /* 上 */
  .produce {
    background-color: #fff;
  }
  .produce .top {
    width: 100%;
    height: 240px;
    display: flex;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
  }
  /* 滚动条高度 */
  .produce .top::-webkit-scrollbar {
    /* 水平滚动条的高度 */
    height: 5px;
  }
  /* 滚动条里面滑块 */
  .produce .top::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.4);
  }
  .produce .top div a > div:nth-child(1) {
    width: 85%;
    border: 1px solid #f5f5f5;
    margin: 10px auto;
    height: 160px;
  }
  .produce .top div a > div {
    width: 100%;
    margin: 10px 0px;
    padding: 0 15px;
  }
  .produce .top div img {
    width: 100%;
    /* margin: 20px; */
  }
  .produce .top div p {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 160px;
    white-space: nowrap;
  }
  /* 钱 */
  .produce .top div span {
    font-size: 14px;
    color: #b48a44;
  }
  /* 购物车图标 */
  .produce .top div .gouWu {
    font-size: 0.453092rem;
    float: right;
  }

  // 简约
  .jianYue {
    width: 100%;
    height: 5.597015rem;
    background-color: #fff;
    margin: 15px 0;
    padding: 0.399787rem;
    // 上面的图片
    .jianYue_top {
      width: 100%;
      height: 3.464819rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    // 下面的字体
    .jianYue_bottom {
      width: 100%;
      height: 1.332623rem;
      border-left: 10px solid #b68d49;
      .jianYue_bottom_right {
        padding-left: 0.266525rem;
        float: left;
        line-height: 26px;
        p {
          font-size: 0.399787rem;
        }
        span {
          font-size: 0.399787rem;
          color: #b68c48;
        }
      }
      .jianYue_bottom_left {
        float: right;
        height: 100%;
        font-size: 0.399787rem;
        line-height: 26px;
        width: 6.130064rem;
        border-left: 2px solid #f3ebe0;
        color: #aeaeae;
        padding-left: 0.266525rem;
      }
    }
  } //简约

  // 热卖产品区
  .re {
    // margin-top: 0.399787rem;
    width: 100%;
    // height: 500px;
    background-color: #fff;
    height: 50px;
    overflow: hidden;
    transition: all 0.3s linear;
    // 标题
    header {
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      position: relative;
      border-bottom: 2px solid #f1eae1;
      span {
        font-size: 0.479744rem;
        color: #5a5a5a;
        display: inline-block;
        width: 2.665245rem;
        height: 80%;
        background-color: #fff;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 50%;
        transform: translate(-50%);
      }
      div {
        height: 50%;
        width: 60%;
        border-top: 1px solid #454545;
        // margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
      }
    }

    // 内容
    main {
      padding: 10px 10px;
      width: 100%;
      // 整体的内容
      .zheng {
        width: 100%;
        height: 2.132196rem;
        // 左边的图片
        .main_left {
          width: 1.865672rem;
          height: 1.865672rem;
          float: left;
          border: 1px solid #f5f5f5;
          img {
            width: 100%;
            height: 100%;
          }
        }
        // 右边的文字
        .main_right {
          width: 80%;
          float: left;
          padding-left: 0.399787rem;
          font-size: 0.399787rem;
          line-height: 30px;
          p {
            color: #353535;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          span {
            float: left;
            font-size: 16px;
            color: #b1843b;
            font-weight: 500;
          }
          i {
            float: right;
            color: #b1843b;
            font-size: 19px;
            font-weight: 600;
          }
        }
      }
    } //main

    // 底部信息
    /* 底部信息 */
    footer {
      width: 100%;
      height: 3.997868rem;
      margin-top: 1.332623rem;
      background-color: #efeff4;
    }
    footer > div {
      width: 80%;
      margin: auto;
      text-align: center;
      line-height: 2.665245rem;
      font-size: 16px;
      color: #b7b7b9;
      position: relative;
    }
    footer > div span {
      display: inline-block;
      background-color: #efeff4;
      position: relative;
      z-index: 2;
      width: 85px;
    }
    footer > div .xian {
      width: 100%;
      border-top: 1px solid #d3d3d4;
      position: absolute;
      top: 50%;
      margin: auto;
    }
    /* 两个图标 */
    .ke {
      width: 1.066098rem;
      height: 1.066098rem;
      border: 0.026652rem solid transparent;
      position: fixed;
      bottom: 70px;
      right: 15px;
      border-radius: 20px;
      background: rgba(151, 113, 37, 0.2);
      text-align: center;
    }
    .ke span,
    .gou span {
      font-size: 20px;
      line-height: 40px;
      color: #977125;
    }
    .ke span::after {
      content: "";
      width: 10px;
      height: 10px;
      background-color: #977125;
      position: fixed;
      right: 19px;
      border-radius: 10px;
      bottom: 95px;
    }
    .gou {
      width: 1.066098rem;
      height: 1.066098rem;
      border: 0.026652rem solid transparent;
      position: fixed;
      bottom: 120px;
      right: 15px;
      border-radius: 20px;
      background: rgba(151, 113, 37, 0.2);
      text-align: center;
    }
  }
  // 展开
  .zhan {
    transition: all 0.3s linear;
    height: 450px;
  }
  .top_tu {
    width: 1.066098rem;
    height: 1.066098rem;
    border: 0.026652rem solid transparent;
    position: fixed;
    bottom: 170px;
    right: 15px;
    border-radius: 20px;
    background: rgba(151, 113, 37, 0.2);
    text-align: center;
    /* line-height: 15px; */
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      border-left: 2px solid #977125;
      border-top: 2px solid #977125;
      transform: rotate(45deg);
      margin-top: 6px;
    }
  }
} //about
</style>
